<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们 - 企业官网</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <div class="container">
            <div class="logo">
                <h1>品牌名称</h1>
            </div>
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="about.html">关于我们</a></li>
                    <li><a href="services.html">服务项目</a></li>
                    <li><a href="products.html">产品展示</a></li>
                    <li><a href="contact.html" class="active">联系我们</a></li>
                </ul>
            </nav>
            <div class="menu-toggle">
                <i class="fas fa-bars"></i>
            </div>
        </div>
    </header>

    <!-- 页面标题 -->
    <section class="page-header">
        <div class="container">
            <h1>联系我们</h1>
            <p>我们期待与您沟通</p>
        </div>
    </section>

    <!-- 联系信息和表单 -->
    <section class="contact-section">
        <div class="container">
            <div class="contact-info">
                <h2 class="section-title">联系方式</h2>
                <div class="info-item">
                    <i class="fas fa-map-marker-alt"></i>
                    <div>
                        <h3>地址</h3>
                        <p>北京市朝阳区XX大厦 100000</p>
                    </div>
                </div>
                <div class="info-item">
                    <i class="fas fa-phone"></i>
                    <div>
                        <h3>电话</h3>
                        <p>(010) 12345678</p>
                    </div>
                </div>
                <div class="info-item">
                    <i class="fas fa-envelope"></i>
                    <div>
                        <h3>邮箱</h3>
                        <p>contact@example.com</p>
                    </div>
                </div>
                <div class="info-item">
                    <i class="fas fa-clock"></i>
                    <div>
                        <h3>工作时间</h3>
                        <p>周一至周五: 9:00 - 18:00</p>
                        <p>周六周日: 休息</p>
                    </div>
                </div>
                <div class="social-icons">
                    <h3>关注我们</h3>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-weixin"></i></a>
                        <a href="#"><i class="fab fa-weibo"></i></a>
                        <a href="#"><i class="fab fa-linkedin"></i></a>
                    </div>
                </div>
            </div>
            <div class="contact-form">
                <h2 class="section-title">发送消息</h2>
                <form id="contactForm">
                    <div class="form-group">
                        <label for="name">您的姓名</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">电子邮箱</label>
                        <input type="email" id="email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="phone">联系电话</label>
                        <input type="tel" id="phone" name="phone">
                    </div>
                    <div class="form-group">
                        <label for="subject">主题</label>
                        <input type="text" id="subject" name="subject" required>
                    </div>
                    <div class="form-group">
                        <label for="message">您的留言</label>
                        <textarea id="message" name="message" rows="5" required></textarea>
                    </div>
                    <button type="submit" class="btn">发送信息</button>
                </form>
            </div>
        </div>
    </section>

    <!-- 地图 -->
    <section class="map-section">
        <div class="container">
            <h2 class="section-title">我们的位置</h2>
            <div class="map-container">
                <!-- 这里可以嵌入地图，例如百度地图或高德地图 -->
                <div class="map-placeholder">
                    <!-- 为了演示，这里使用占位图 -->
                    <img src="images/map.jpg" alt="公司地址地图">
                </div>
            </div>
        </div>
    </section>

    <!-- 常见问题 -->
    <section class="faq-section">
        <div class="container">
            <h2 class="section-title">常见问题</h2>
            <div class="faq-container">
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>如何预约咨询服务？</h3>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>您可以通过电话、邮件或填写网站联系表单预约咨询服务。我们的客服人员会在24小时内与您联系，安排合适的咨询时间。</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>贵公司的服务范围有哪些？</h3>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>我们的服务范围包括但不限于战略咨询、技术开发、营销推广等。您可以在"服务项目"页面查看详细信息，或直接联系我们了解更多。</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>如何成为贵公司的合作伙伴？</h3>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>我们欢迎各类企业与我们建立合作关系。您可以发送合作意向邮件至partner@example.com，我们的业务发展团队会与您联系商讨合作事宜。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-about">
                    <h3>品牌名称</h3>
                    <p>提供专业的企业解决方案</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-weixin"></i></a>
                        <a href="#"><i class="fab fa-weibo"></i></a>
                        <a href="#"><i class="fab fa-linkedin"></i></a>
                    </div>
                </div>
                <div class="footer-links">
                    <h3>快速链接</h3>
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="about.html">关于我们</a></li>
                        <li><a href="services.html">服务项目</a></li>
                        <li><a href="products.html">产品展示</a></li>
                        <li><a href="contact.html">联系我们</a></li>
                    </ul>
                </div>
                <div class="footer-contact">
                    <h3>联系方式</h3>
                    <ul>
                        <li><i class="fas fa-map-marker-alt"></i> 北京市朝阳区XX大厦</li>
                        <li><i class="fas fa-phone"></i> (010) 12345678</li>
                        <li><i class="fas fa-envelope"></i> contact@example.com</li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 品牌名称. 保留所有权利</p>
            </div>
        </div>
    </footer>

    <script src="js/main.js"></script>
    <script>
        // 常见问题折叠功能
        document.addEventListener('DOMContentLoaded', function() {
            const faqQuestions = document.querySelectorAll('.faq-question');
            
            faqQuestions.forEach(question => {
                question.addEventListener('click', () => {
                    const faqItem = question.parentElement;
                    faqItem.classList.toggle('active');
                    
                    // 关闭其他已打开的FAQ
                    document.querySelectorAll('.faq-item').forEach(item => {
                        if (item !== faqItem && item.classList.contains('active')) {
                            item.classList.remove('active');
                        }
                    });
                });
            });
            
            // 表单提交处理
            const contactForm = document.getElementById('contactForm');
            if (contactForm) {
                contactForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    // 这里可以添加表单验证和提交逻辑
                    alert('感谢您的留言！我们会尽快与您联系。');
                    contactForm.reset();
                });
            }
        });
    </script>
</body>
</html> 